<template>
  <div ref="element">
    <van-popup
      v-model="dialogShow"
      position="bottom"
      @open="onOpen"
      :style="{ height: '80%' }"
      closeable
      close-icon-position="top-left"
      :close-on-click-overlay="false"
    >
      <div class="popup-title">
        {{ title }}
        <div class="right-button">
          <div class="complete" @click="submitChoose()">
            {{ confirmButton }}
          </div>
          <div class="complete" v-if="showClear == true" @click="clearChoose()">
            清空
          </div>
        </div>
      </div>
      <div class="popup-content">
        <div class="risk-check">
          <div class="search">
            <van-search
              class="common_search"
              @search="confirm"
              @clear="clearSearch"
              v-model="searchVal"
              :placeholder="placeholder"
              :maxlength="maxlength"
            />
            <slot name="filter" />
          </div>

          <van-tabs
            v-model="active"
            @change="change"
            v-if="tab"
            title-active-color="#00c1de"
          >
            <van-tab
              v-for="(item, index) in pageData"
              :title="item.title"
              :key="index"
              :name="index"
            >
              <van-list
                :finished="finished"
                v-model="loading"
                offset="100"
                @load="loadMore"
                finished-text="没有更多了"
              >
                <slot />
              </van-list>
            </van-tab>
          </van-tabs>
          <van-list
            :finished="finished"
            v-model="loading"
            v-if="!tab"
            offset="100"
            @load="loadMore"
            finished-text="没有更多了"
          >
            <slot />
          </van-list>
          <div class="choose_btm" v-if="this.isMulti != false && !tab">
            <div class="choose_cancel">
              <van-button
                class="mr-10"
                type="warning"
                size="mini"
                @click="checkAll"
                >全选</van-button
              >
              <van-button
                class="mr-10"
                type="warning"
                @click="toggleAll"
                size="mini"
                >取消全选</van-button
              >
              <slot name="bottom" />
            </div>
          </div>
        </div>
      </div>
    </van-popup>
    <div></div>
  </div>
</template>
<script>
/**
 * DialogPageList 带搜索tab过滤的分页列表弹出框
 * @property {String} title 标题
 * @property {String} confirmButton 完成或者确认按钮名称
 * @property {String} placeholder 搜索栏Placeholder
 * @property {Number} maxlength 输入最大长度
 * @property {String} url 请求数据的path
 * @property {Object} params 搜索框条件对象
 *  params: {
      type: Array,
      default: () => [
        {
          title: "公司检查表",
          Name: "Keywords",
          dataType: "CompanyCMPLList",
          page: -1,
          limit: 10,
        },
        {
          title: "公共检查表",
          Name: "Keywords",
          dataType: "SysCMPLList",
          page: -1,
          limit: 10,
        },
        {
          title: "我的检查表",
          Name: "Keywords",
          dataType: "UserList",
          page: -1,
          limit: 10,
        },
      ],
    },
 * @event {Function} initList 数据回调    @initList="_initList" 返回数据为list
 * _initList(list){
      this.list = list
    },
 */
import { deepClone } from "@/utils";

export default {
  props: {
    show: {},
    isMulti: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "选择",
    },
    confirmButton: {
      type: String,
      default: "完成",
    },
    placeholder: {
      type: String,
      default: "搜索",
    },
    maxlength: {
      type: [Number, String],
      default: 100,
    },
    value: {
      type: [Number, String],
      default: "",
    },
    url: {
      type: String,
      default: "",
    },
    tab: {
      type: Boolean,
      default: false,
    },
    params: {
      type: Array,
      default: () => [],
    },
    showClear: {
      type: Boolean,
      default: false,
    },
    showFilter: {
      type: Boolean,
      default: false,
    },
    conditions: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loaded: false,
      searchVal: "",
      active: 0,
      pageData: deepClone(this.params),
      list: [],
      loading: false,
      finished: false,
      height: 0,
      localParams: [],
      first: false,
    };
  },
  created() {
    this.first = true;
    let paramsArr = [
      {
        Name: "Keywords",
        dataType: "List",
        page: -1,
        limit: 10,
      },
    ];
    for (let i = 0; i < paramsArr.length; i++) {
      this.localParams.push(Object.assign(paramsArr[i], this.params[i]));
    }
  },
  watch: {
    value: {
      immediate: true,
      handler(newSearchVal) {
        this.searchVal = newSearchVal;
      },
    },
    searchVal(newVal, oldVal) {
      this.$emit("input", newVal);
    },
  },
  computed: {
    dialogShow: {
      get() {
        return this.show;
      },
      set(value) {
        this.$emit("update:show", value);
      },
    },
  },
  mounted() {
    this.height = document.body.clientHeight * 0.5;
  },
  methods: {
    onOpen() {
      if (!this.loaded) {
        this.loaded = true;
        this.confirm();
      }
    },
    change() {
      this.loading = false;
      this.finished = false;
      this.confirm();
    },
    confirm() {
      this.params[this.active].page = 0;
      this.conditions = this.conditions || [];
      var copyConditions = deepClone(this.conditions);
      if (this.searchVal) {
        copyConditions.push({
          Name: this.params[this.active].name || "Keywords",
          DisplayName: this.searchVal,
          Value: this.searchVal,
          Operator: "like",
          DataType: "String",
        });
      }
      this.params[this.active].conditions = JSON.stringify(copyConditions);
      this.getList();
    },
    clearSearch() {
      this.searchVal = "";
      this.params[this.active].page = 0;
      this.loading = false;
      this.finished = false;
      this.confirm();
    },
    loadMore() {
      
      if (!this.first) {
        this.loading = true;
        this.params[this.active].page++;
        let _this = this;
        _this.$axios
      	.get(_this.url,{params:_this.params[_this.active]})
          .then((res) => {
            _this.loading = false;
            _this.params[_this.active].page = res.data.PageIndex;
            _this.list = _this.list.concat(res.data.Data);
            _this.pageData[_this.active].data = _this.list;
            _this.$emit("initList", _this.list);
            if (!res.data.HasNextPage) {
              _this.finished = true;
            }
          })
          .catch((err) => {
            console.log("err", err);
            _this.finished = true;
          });
      }
    },
    getList() {
      this.loading = true;
      let _this = this;
        _this.$axios
      	.get(_this.url,{params:_this.params[_this.active]})
        .then((res) => {
          _this.loading = false;
          if (!res.data.HasNextPage) {
            _this.finished = true;
          }
          if (res.data.Data) {
            _this.params[_this.active].page = res.data.PageIndex;
            _this.list = res.data.Data;
          } else {
            _this.params[_this.active].page = 0;
            _this.list = res.data;
          }
          _this.pageData[this.active].data = _this.list;
          _this.$emit("initList", _this.list);
          _this.first = false;
        })
        .catch((err) => {
          console.log("err", err);
          _this.finished = true;
        });
    },
    checkAll() {
      this.$emit("checkAll", true);
    },
    toggleAll() {
      this.$emit("checkAll", false);
    },
    submitChoose() {
      this.$emit("callback", true);
    },
    clearChoose() {
      this.$emit("callback", false);
    },
  },
};
</script>
<style lang="less" scoped>
.popup-title {
  text-align: center;
}
.choose_btm {
  display: flex;
  width: 100%;
  justify-content: space-between;
  position: fixed;
  bottom: 0px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-top: 1px solid #efefef;
  background-color: #fff;
  .choose_cancel {
    padding: 0 10px;
    display: flex;
    align-items: center;
    float: left;
  }
  .choose_confirm {
    float: right;
    border-radius: 0;
  }
}
.risk_item_buton {
  width: 100%;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right-button {
  position: absolute;
  right: 0px;
  top: 0px;
}

.complete {
  float: right;
  margin-right: 10px;
  font-size: 13px;
}

.search {
  display: flex;
  background: #e8f1f8;
  align-items: center;
}

.common_search {
  flex-grow: 1;
}
</style>